/* 
    静态属性
        ele
        
    动态方法
        init() 初始化 获取元素 绑定事件 
        render() 渲染页面
*/
class Homepage {
    constructor(ele) {
        this.ele = ele;
        this.init();
    }
    init() {
        //获取元素
        this.hotProLis = $('#hotProLis');
        this.healthProLis = $('#healthProLis');
        this.tr1 = $('#tr1');
        this.tr2 = $('#tr2');
        this.returnTop = $('#returnTop');
        this.rightShopCar = $('#rightShopCar');

        //渲染页面

        //渲染hot板块
        this.renderHot();

        //渲染health板块
        this.renderHealth();

        //渲染brand板块
        this.renderBrand();

        //一些点击事件

        //跳转列表页
        this.ele.on('click', '.top1_wrap,.search_bot,.container_top_left,.container_top_nav,.swiper-slide,.devide_place,.hot_pro_lis,.health_pro_lis,.niu,.hot_brand', function() {
            location.replace('./list.html');
        })

        //右边导航栏购物车
        this.rightShopCar.on('click', () => {
            location.replace('./car.html');
        })

        //回到顶部
        this.returnTop.on('click', () => {
            scrollTo({
                top: 0,
                behavior: "smooth"
            })
        })
    }

    async renderHot() {
        this.str = '';

        //请求数据
        this.data = await pAjax({
            url: '../json/data2.json'
        });

        //转化为js格式
        this.data = JSON.parse(this.data).Data;
        // console.log(this.data);
        this.data.forEach((item, index) => {
            // 只展示五个
            if (index < 5) {
                this.str += `<li class="hot_pro_list" index="${index+1}">
                <figure>
                    <a href="javascript:;"><img src="${item.Pic180}" alt="" title="${item.WareName}">
                        <div class="zhekou">1.1折</div>
                    </a>
                </figure>
                <figcaption>
                    <h3 title="${item.WareName}"><a href="javascript:;">${item.WareName}</a></h3>
                    <p>
                        <mark>￥${item.PrmPrice}</mark>
                        <span>￥${item.Price}</span>
                    </p>
                </figcaption>
            </li>`;
            }

        })
        this.hotProLis.html(this.str);
    }

    async renderHealth() {
        this.str1 = '';
        this.data1 = await pAjax({
            url: '../json/data11.json'
        });
        this.data1 = JSON.parse(this.data1).Data;
        this.data1.forEach((item, index) => {
            if (index < 5) {
                this.str1 += `<li class="health_pro_list" index="${index+1}">
                <figure>
                    <a href="javascript:;" title="${item.WareName}"><img src="${item.Pic800}" alt=""></a>
                </figure>
                <figcaption>
                    <h4><a href="javascript:;" title="${item.WareName}">${item.WareName}</a></h4>
                    <mark>￥${item.SalePrice}.00</mark>
                </figcaption>
            </li>`;
            }
        })
        this.healthProLis.html(this.str1);

    }

    async renderBrand() {
        [this.str2, this.str3] = ['', ''];
        this.data2 = await pAjax({
            url: '../json/data4.json'
        });
        this.data2 = JSON.parse(this.data2).photoSrc;
        this.data2.forEach((item, index) => {
            console.log(item);
            if (index < 7) {
                this.str2 += `<td>
                <a href="javascript:;"><img src="${item.src}" alt=""></a>
            </td>`;
            } else {
                this.str3 += `<td>
                <a href="javascript:;"><img src="${item.src}" alt=""></a>
            </td>`;
            }
        })
        this.tr1.html(this.str2);
        this.tr2.html(this.str3);
    }
}

new Homepage($('body'));